<template>
<div class="sdy-home-hot">
<div class="top">
    <span>京东秒杀</span>
    <p>
        <span>{{hours < 10 ? '0'+hours : hours}}</span> :
        <span>{{minutes < 10 ? '0'+minutes : minutes}}</span> :
        <span>{{seconds < 10 ? '0'+seconds : seconds}}</span> 
    </p>
    <span>按钮</span>
</div>
<div class="content">
    <ul>
        <li 
        v-for="item in hotList"
        :key ="item.proid"
        >
            <img :src="item.img1" alt="">
            <span>{{item.sales}}</span>
        </li>
    </ul>
</div>
</div>
</template>
<script setup lang="ts">
import {Dialog} from 'vant'
import { hotListApi } from '@/api/goods'
import{ref ,onMounted, watch} from 'vue'
import type {MyHotItem} from '@/config/interface'
const hotList =ref<MyHotItem[]>([])
// 定义一个倒时器
const ms =ref<number>(123456)
// 开启一个定时器
const timer =setInterval(() => ms.value--,1000)
// 准备分时秒
const hours =ref<number>(0)
const minutes =ref<number>(0)
const seconds =ref<number>(0)
const watchHandler = ()=>{
    hours.value =Math.floor(ms.value/(60*60)) 
    minutes.value =Math.floor(ms.value%(60*60)/60) 
    seconds.value = ms.value%60
}
if(ms.value<0){
    clearInterval(timer)
    Dialog.alert({title: '秒杀', message: '秒杀已经开始, 开来吧', theme: 'round-button',})
}
watch(ms,watchHandler)

onMounted(async()=>{
    watchHandler()
    const res =await hotListApi({limitNum:10})
    // console.log(res);
    hotList.value = res.data
    
})
</script>
<style scoped lang="scss">
    .sdy-home-hot{
        height: 180px;
        box-sizing: border-box;
        padding:15px;
        display: flex;
        flex-direction: column;
        background-clip: content-box;
        >.top{
            height:50px;
            background: url() no-repeat;
            background-size: 100% 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            >p{
                margin-right: 130px;
                >span{
                    background-color: #c72418;
                    padding: 2px 3px;
                    font-size: 12px;
                    color: #fff;
                    margin: 0 2px;
                    border-radius: 5px;
                    overflow: hidden;
                }
            }
        }
        >.content{
            flex: 1;
            overflow-x: auto;
            >ul{
                display: flex;
                height: 100%;
                >li{
                    width: 55px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    padding: 3px;
                    background-clip:content-box;
                    border: 1px solid #333;
                    margin: 0 3px;
                    >img{
                        width: 45px;
                        height: 45px;
                        display: block;
                    }
                    >span{
                        color: red;
                        font-size: 12px ;
                        margin-top: 10px;
                    }
                }
            }
        }
    }
</style>